<template>
<div class="ui-material-item" >
  <div class="ui-material-item-cover">
    <img :src="item.img_url" />
  </div>
  <div class="ui-material-item--tit">{{ item.title }}</div>
  <div class="ui-material-item--des">{{ item.img_des }}</div>
  <div class="ui-material-operate">
    <Icon type="ios-create" size="16" @click="onEdit(item)" />
    <Icon type="ios-trash" size="16" @click="onDel(item.id)" />
  </div>
</div>
</template>

<script>
export default {
  name: 'ui-material-item',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {},
  data() {
    return {}
  },
  methods: {
    // 编辑指定资源
    onEdit(row) {
      this.$emit('on-edit', row)
    },
    // 删除指定资源
    onDel(id) {
      this.$emit('on-del', id)
    }

  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.ui-material-item {
  width: 149px;
  height: 198px;
  margin: 20px 0 0 20px;
  border: 1px solid rgb(231, 231, 235);
  position: relative;
  &:hover {
    .ui-material-operate {
      display: flex;
    }
  }
}
.ui-material-item-cover {
  width: 147px;
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgb(231, 231, 235);
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.ui-material-item--tit {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 5px 10px 0;
  height: 24px;
  line-height: 24px;
}
.ui-material-item--des {
  font-size: 12px;
  color: #999;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
}
.ui-material-operate {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background-color: rgba(#000, 0.6);
  display: none;
  align-items: center;
  color: #fff;
  .ivu-icon {
    cursor: pointer;
    & + .ivu-icon {
      margin-left: 3px;
    }
  }
}
</style>
